<script setup>
import TheButton from "../components/TheButton.vue";
import TheAvatar from "../components/TheAvatar.vue";
import { reactive, onMounted, computed } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
const store = useStore();
const router = useRouter();
const user = computed(() => store.state.user.user);
const userAvatar = computed(() => store.state.user.userAvatar);

//初始化表单数据
onMounted(() => {
  profileData = user.value;
});

//表单数据
let profileData = reactive({
  avatar: userAvatar.value,
  username: user.value.username,
  name: user.value.name,
  intro: user.value.intro,
  mobilePhone: user.value.mobilePhone,
  gender: user.value.gender,
  website: user.value.webSite,
});

//提交表单数据
const submitForm = async () => {
  store.dispatch("ChangeUserInfoAsync", {
    username: profileData.username,
    name: profileData.name,
    intro: profileData.intro,
    mobilePhone: profileData.mobilePhone,
    gender: profileData.gender,
    webSite: profileData.webSite,
  });
  await router.push("/profile");
};

//修改头像
const uploadAvatar = (e) => {
  const picFile = e.target.files[0];
  // console.log(picFile);
  const picLocation = URL.createObjectURL(picFile);
  console.log(picLocation);
  profileData.avatar = picLocation;
  store.commit("changeUserAvatar", picLocation);
  // profileData.avatar = ;
  // console.log(profileData.avatar);
};
</script>
<template>
  <div>
    <p class="title">编辑个人资料</p>
    <div class="changeAvatar">
      <TheAvatar
        class="avatar"
        :width="48"
        :height="48"
        :src="profileData.avatar"
      ></TheAvatar>
      <TheButton class="button">修改头像</TheButton>
      <input @change="uploadAvatar" class="inputFile" type="file" />
    </div>
    <form class="profileForm">
      <label for="username">用户名：</label>
      <input type="text" v-model="profileData.username" />
      <label for="name">昵称：</label>
      <input type="text" v-model="profileData.name" />
      <label for="intro">简介：</label>
      <textarea name="" id="" row="12" v-model="profileData.intro"></textarea>
      <label>手机号：</label>
      <input type="text" v-model="profileData.mobilePhone" />
      <label for="">性别：</label>
      <div class="genderRadios">
        <input
          type="radio"
          id="M"
          value="M"
          name="gender"
          v-model="profileData.gender"
        />男
        <input
          type="radio"
          id="F"
          value="F"
          name="gender"
          v-model="profileData.gender"
        />女
      </div>
      <label for="website">网站：</label>
      <input type="text" v-model="profileData.website" />
      <div class="actions">
        <TheButton type="reset" reverse>取消</TheButton>
        <TheButton type="submit" @click.prevent="submitForm">确认</TheButton>
      </div>
    </form>
  </div>
</template>

<style scoped>
.title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 42px;
  margin-left: 70px;
}

.changeAvatar {
  display: flex;
  align-items: center;
  position: relative;
}

.changeAvatar .avatar {
  justify-self: end;
}

.changeAvatar .button {
  margin-left: 26px;
}

.inputFile {
  opacity: 0;
  position: absolute;
  cursor: pointer;
  bottom: 0;
  left: 0;
}

.profileForm {
  display: grid;
  grid-template-columns: max-content 1fr;
  row-gap: 32px;
  column-gap: 10px;
  margin-top: 38px;
}

.profileForm > label {
  grid-column: 1/2;
  justify-self: end;
  position: relative;
  top: 6px;
}

.profileForm textarea {
  resize: none;
}

.genderRadios {
  display: flex;
  gap: 10px;
  transform: translateY(5px);
}

.profileForm .actions {
  grid-column: 1/3;
  justify-self: end;
  display: flex;
  gap: 16px;
}
</style>
